<template>
    <div>
        <div class="school">
            <h1>{{ msg }}</h1>
            <h2>学生姓名：{{ name }}</h2>
            <h2>学生性别：{{ sex }}</h2>
            <h2>学生年龄：{{ myAge }}</h2>
            <button @click="updateAge">尝试修改收到的年龄</button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Student',
    data() {
        return {
            msg: '我是一个尚硅谷的学生',
            myAge: this.age,
        };
    },
    methods: {
        updateAge() {
            this.myAge++;
        },
    },
    // 简单接受
    props: ['name', 'sex', 'age'],

    // 接受的同时对数据进行类型限制
    // props: {
    //     name: String,
    //     age: Number,
    //     sex: String,
    // },

    // 接受的同时对数据进行类型限制+默认值指定+必要性的限制
    // props: {
    //     name: {
    //         type: String, // name是字符串类型
    //         required: true, // name是必须的
    //     },
    //     age: {
    //         type: Number,
    //         default: 99, // 默认值
    //     },
    //     sex: {
    //         type: String,
    //         required: true,
    //     },
    // },
};
</script>

<style>
.school {
    background-color: gray;
}
</style>
